import React, { useEffect } from 'react'
import { connect } from 'react-redux';

import { Switch, Route } from 'react-router'

import Header from './components/Header';
import Footer from './components/Footer';

import Index from './pages/Home/Index';
import Login from './pages/Login';
import Register from './pages/Register';
import Editor from './pages/Editor';
import Setting from './pages/Setting';
import Profile from './pages/Profile';
import * as userActionCreators from './store/actionCreators/user'


function App(props) {
  const { getUser } = props
  
  useEffect(() => {
    const jwt = localStorage.getItem('jwt')
    jwt && getUser()
  }, [getUser])

  return (
    <div>
      <Header />
      <Switch>
        <Route path="/" exact component={Index}></Route>
        <Route path="/login" component={Login}></Route>
        <Route path="/register" component={Register}></Route>
        <Route path="/editor" component={Editor}></Route>
        <Route path="/settings" component={Setting}></Route>
        <Route path="/@:username" component={Profile}></Route>
      </Switch>
      <Footer />
    </div>
  )
}

const mapDispatchToProps = dispatch => ({
  getUser: function () {
    dispatch(userActionCreators.getUser())
  }
})



export default connect(null, mapDispatchToProps)(App)